<template>
	<view>
		<view class="bj_around mb20">
			<view class="bj_sx" v-for="(item , i) in chlist" @click="chi(i)">
				<view class="chitem" :class="item.ch ? 'chitemon' : ''">
					{{item.name}}
				</view>
				<view class="chtt" :class="item.ch ? 'chtton' : ''"></view>
			</view>
		</view>
		<view class="tabth bj_between">
			<view class="w33 tc">
				{{$t("zh.th1")}}
			</view>
			<view class="w33 tc">
				{{$t("zh.th2")}}
			</view>
			<view class="w33 tc">
				{{$t("zh.th3")}}
			</view>
		</view>
		<view class="tabtr mb20">
			<view class="tabtr-tr bj_between" v-for="item in list">
				<view class="w33 tc">
					{{String(item.createtime).split(" ")[0]}}
				</view>
				<view class="w33 tc">
					{{item.money}}
				</view>
				<view class="w33 bj_center">
					<view class="tabtr-btn">
						{{$t("zh.btn2")}}
					</view>
				</view>
			</view>
		</view>

		<view class="bj_center">
			<image src="/static/page5/p1.png" class="pgbtn" @click="prev"></image>
			<view class="ybbox">
				{{pageNumber}}/{{pageCount}}
			</view>
			<image src="/static/page5/p2.png" class="pgbtn" @click="next"></image>
		</view>


		<zero-loading type="surround" v-if="loading"></zero-loading>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import useI18n from '@/store/useI18n.js'
	import {
		onShow
	} from "@dcloudio/uni-app"
	import common from '../../js/common';
	let loading = ref(false)
	const {
		t
	} = useI18n()
	let pageNumber = ref(1)
	let pageCount = ref(0)
	let list = ref([])
	let chlist = ref([{
			name: t("zh.jc1"),
			ch: false
		},
		{
			name: t("zh.jc2"),
			ch: false
		}
	])

	onShow(function() {
		chi(0)
	})

	function chi(v) {
		if (loading.value) {
			return
		}
		pageNumber.value = 1
		pageCount.value = 0
		list.value = []
		for (var i = 0; i < chlist.value.length; i++) {
			chlist.value[i].ch = false
		}
		chlist.value[v].ch = true
		getlist()
	}

	function prev() {
		if (loading.value) {
			return
		}
		if (pageNumber.value > 1) {
			pageNumber.value--
			getlist()
		}
	}

	function next() {
		if (loading.value) {
			return
		}
		if (pageNumber.value < pageCount.value - 1) {
			pageNumber.value++
			getlist()
		}
	}

	function getlist() {
		loading.value = true
		common.balanceDetails({
			logType: chlist.value[0].ch ? 1 : 11,
			pageNumber: pageNumber.value,
			pageSize: 10
		}).then(res => {
			pageCount.value = res.data.total % 10 == 0 ? res.data.total / 10 : parseInt(res.data.total / 10) + 1
			list.value = [...list.value, ...res.data.rows]
			loading.value = false
		})
	}
</script>

<style scoped lang="scss">
	.chitem {
		font-size: 30rpx;
		color: #A2B5D5;
		margin-bottom: 10rpx;
	}

	.chitemon {
		color: #FFFFFF;
	}

	.chtt {
		width: 148rpx;
		height: 8rpx;
	}

	.chtton {
		background: #FFFFFF;
	}

	.tabth {
		height: 80rpx;
		background: linear-gradient( 90deg, #00561D 0%, #007E2A 100%);
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		font-size: 26rpx;
	}

	.tabtr {
		width: 710rpx;
		background: #0F194D;
		border-radius: 20rpx;
		font-size: 26rpx;

		&-tr {
			height: 84rpx;
			background: #083F1A;
		}

		&-tr:nth-child(even) {
			background: #00561D;
		}

		&-tr:last-child {
			border-radius: 0 0 20rpx 20rpx;
		}

		&-btn {
			width: 144rpx;
			height: 48rpx;
			line-height: 48rpx;
			background: #247BFF;
			text-align: center;
			border-radius: 12rpx;
			font-size: 24rpx;
		}
	}

	.ybbox {
		font-size: 28rpx;
		padding: 0 20rpx;
	}

	.pgbtn {
		width: 56rpx;
		height: 56rpx;
	}
</style>